<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>风行融媒体 - 传输管理</title>
  <link rel="stylesheet" href="../styles/common.css">
  <link rel="stylesheet" href="../styles/transfer.css">
</head>
<body>
  <div class="app-container">
    <!-- 标题栏 -->
    <div class="title-bar">
      <div class="app-icon">
        <span>📊</span>
        <span>传输管理</span>
      </div>
      <div class="controls">
        <button id="cloud-sync-btn" title="云同步">
          <svg t="1761036139862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" width="19" height="19"><path d="M806.7072 470.528A290.816 290.816 0 0 0 252.16 371.4048a217.5488 217.5488 0 0 0-9.8304 428.1344 149.1456 149.1456 0 0 0 37.0176 4.352h504.4224a167.8336 167.8336 0 0 0 167.7824-167.7824c1.0752-82.7904-62.1056-154.6752-144.896-165.5808z m-44.6464 44.6464a26.2656 26.2656 0 0 0 19.6096 7.6288h4.352a113.3056 113.3056 0 0 1 0 226.6112H280.5248a114.3808 114.3808 0 0 1-26.1632-3.2768 164.1984 164.1984 0 0 1 19.6096-324.6592 27.3408 27.3408 0 0 0 22.9888-17.408 237.3632 237.3632 0 0 1 458.6496 84.992v3.2768c-1.0752 10.9056 1.0752 17.408 6.5536 22.8864z" p-id="5279" fill="#515151"></path><path d="M489.6768 557.6704a23.1936 23.1936 0 0 0-30.72 0l-27.2384 27.2384V458.5472a21.8112 21.8112 0 1 0-43.5712 0v126.3616l-27.2384-27.2384a23.1936 23.1936 0 0 0-30.72 0 21.0432 21.0432 0 0 0 0 30.72l64.256 64.256c1.0752 1.0752 2.2016 1.0752 3.2768 2.2016s2.2016 1.0752 3.2768 2.2016c1.0752 0 2.2016 1.0752 3.2768 1.0752h10.9056c1.0752 0 2.2016-1.0752 3.2768-1.0752a22.784 22.784 0 0 0 6.5536-4.352l64.256-64.256a21.0432 21.0432 0 0 0 0-30.72zM670.72 508.672l-64.4608-64.3072-1.0752-1.0752c-1.0752 0-1.0752-1.0752-2.2016-1.0752s-1.0752-1.0752-2.2016-1.0752-1.0752-1.0752-2.2016-1.0752-1.0752 0-2.2016-1.0752h-13.056c-1.0752 0-1.0752 0-2.2016 1.0752a1.0752 1.0752 0 0 0-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752l-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752L510.3616 508.672a21.5552 21.5552 0 0 0 30.72 30.72L568.32 512v126.3616a21.8112 21.8112 0 0 0 43.5712 0V512l27.2384 27.2384a21.0432 21.0432 0 0 0 30.72 0 20.48 20.48 0 0 0 1.0752-30.72z" p-id="5280" fill="#515151"></path></svg>
        </button>
        <button id="minimize-btn">−</button>
        <button id="maximize-btn">□</button>
        <button id="close-btn">×</button>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="transfer-container">
      <!-- 头部 -->
      <div class="transfer-header">
        <h2>传输管理</h2>
        <div class="header-actions">
          <button class="btn btn-secondary" id="pause-all-btn">⏸️ 全部暂停</button>
          <button class="btn btn-secondary" id="resume-all-btn">▶️ 全部继续</button>
          <button class="btn btn-secondary" id="clear-completed-btn">🧹 清除已完成</button>
          <button class="btn btn-primary" id="back-btn">返回主页</button>
        </div>
      </div>

      <!-- 统计信息 -->
      <div class="transfer-stats">
        <div class="stat-card">
          <div class="stat-icon"><img src="./assets/upload.svg" alt="上传" style="width: 24px; height: 24px;"></div>
          <div class="stat-info">
            <div class="stat-label">上传任务</div>
            <div class="stat-value" id="upload-count">0</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon"><img src="./assets/dow.svg" alt="下载" style="width: 24px; height: 24px;"></div>
          <div class="stat-info">
            <div class="stat-label">下载任务</div>
            <div class="stat-value" id="download-count">0</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">✅</div>
          <div class="stat-info">
            <div class="stat-label">已完成</div>
            <div class="stat-value" id="completed-count">0</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">❌</div>
          <div class="stat-info">
            <div class="stat-label">失败</div>
            <div class="stat-value" id="failed-count">0</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">🚀</div>
          <div class="stat-info">
            <div class="stat-label">平均速度</div>
            <div class="stat-value" id="avg-speed">0 KB/s</div>
          </div>
        </div>
      </div>

      <!-- 筛选器 -->
      <div class="transfer-filter">
        <button class="filter-btn active" data-filter="all">全部</button>
        <button class="filter-btn" data-filter="uploading">上传中</button>
        <button class="filter-btn" data-filter="downloading">下载中</button>
        <button class="filter-btn" data-filter="paused">已暂停</button>
        <button class="filter-btn" data-filter="completed">已完成</button>
        <button class="filter-btn" data-filter="failed">失败</button>
      </div>

      <!-- 传输列表 -->
      <div class="transfer-list-container">
        <div class="transfer-list" id="transfer-list">
          <!-- 传输项将动态插入 -->
        </div>
      </div>
    </div>
  </div>

  <script src="../utils/common.js"></script>
  <script src="../scripts/transfer.js"></script>
</body>
</html>
